<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="./images/vango.ico"/>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <title>myweb</title>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"> 
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" type="text/css" href="css/pageAbout.css">
    <style>

    </style>
</head>
<body>
  <div class="maskBox"></div>
  <img src="./images/images.png" alt="" class="rocket2">
    <!-- Swiper -->
    
<div class="container">
  <div class="main">
    <div class="nav-mask"></div>
    
    <div class="init-animation">
      <div class="loading">
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
    </div>
    </div>
    <div class="navBorder"></div>
    <div class="ham"><i class="fa fa-hand-paper-o"></i></div>
    <div class="logo"><a href="https://gitee.com/zxb89757" target="_blank"><img class="git" src="./images/github.svg" alt=""></a></div>

    <div class="swiper-containerone">
      <div class="swiper-wrapper">
        

        <div class="swiper-slide containerstart" style="" data-title="首页">
          <div class="carousel" style="height: 100vh!important;">
                      <!-- <img class="show" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551637586912&di=1f4603039b65cca50e13b66c304a2dd4&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-03%2F5a4c42749eaaa.jpg" alt=""> -->
                      <!-- <img  src="http://pic1.win4000.com/wallpaper/2018-01-03/5a4c4270d8799.jpg" alt=""> -->
                      <!-- <img style="filter: brightness(90%)" src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt=""> -->
                      <!-- <img src="https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" alt="">haikeyi -->
                      <img class="swiper-lazy"  style="filter: brightness(90%)" src="./images/indexPhone1.jpg" alt="">
                      <!-- <img style="filter: brightness(90%)" src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt=""> -->
                      <!-- <img style="filter: brightness(90%)" src="https://cdn-images-1.medium.com/max/2000/1*ud7JwDc-grF4baKsrEHbf0g.jpeg" alt=""> -->
                      <img class="swiper-lazy"  style="filter: brightness(90%)" data-src="./images/indexPhone2.jpg" alt="">
                      <!-- <img style="filter: brightness(90%)" src="https://images.unsplash.com/photo-1496902526517-c0f2cb8fdb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt=""> -->
                      <img style="filter: brightness(90%);" src="./images/indexPhone3.jpg" alt="">
                      <div class="dot">
                        <p></p>
                        <p></p>
                        <p class="show"></p>
                      </div>
          <div class="welcome"><p><a href="#">welcome</a> to my website</p> <span>我叫王飞，一名前端开发工程师</span></div><span class="next"></span>
          </div>
          <div class="welcome"><p>welcome to my website</p> <span>我叫王飞，一名前端开发工程师</span></div><span class="next"></span>
          <!-- <div style="clear: both;"></div> -->
          <svg version="1.1" id="层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
</style>

<g>
  <path class="st1" d="M709.7,238.4c0.3,0.3,0,0.5-0.5,0.5c-59.8,5.2-95.4,36.1-120.1,70.7c-31.2,43.9-55.4,89.4-51,112.8
    c2.1,10.4,7.8,16.9,21.6,14.8c11.7-1.6,25.5-15.9,29.6-28.1c0-0.3,0.3-0.5,0.5-0.3c0.3,0,0.5,0.3,0.5,0.5
    c-4.2,12.5-16.9,26-30.7,29.9s-23.7-3.4-27-15.6c-9.9-35.1,40-105,69.9-142.5c-24.7,17.9-46.5,39.5-64,59.3
    c-22.4,25.2-40.6,50.2-53,68.9c-3.9,6-17.4,30.7-19.2,30.7c-2.1,0-3.4-2.1-2.3-3.4c7.5-11.7,14.8-53.3,19.5-80.9
    c1.3-8.3,2.6-15.6,3.6-21.1c4.4-22.6,12.7-47.6,23.1-70.7c-16.4,10.7-36.7,31.5-59,71c-18.5,32.5-36.4,57.2-54.1,74.6
    c-23.4,23.4-61.4,40.6-96.7,25.7c-23.7-9.9-32.8-27.8-34.3-51.5c-2.1-35.9,21.3-75.9,55.1-93.3c8.8-4.7,18.2-7.5,27.8-8.8
    c-2.6-10.9-1.6-22.9,2.9-34.1c8.6-21.3,27.6-37.4,51.2-42.9c43.7-10.4,70.2,12.7,93.3,33.3c6.5,5.5,12.5,10.9,19,15.6
    c16.4-8.3,28.6-7.3,33.8-6c7,1.8,8.8,8.8,7.5,12.7c-1.6,3.9-6.2,7.8-13.3,7c-8.3-1-15.9-4.4-23.1-9.1c-0.3,0-0.3,0.3-0.5,0.3
    c-12,24.7-21.6,52.8-26.5,77.2c-1,5.7-2.3,12.7-3.6,21.1c-3.6,20.5-7.8,46-13,64.2c11.7-18.5,33-49.9,61.1-81.4
    c14.6-16.4,32.2-34.3,52.3-50.2c4.9-3.9,27-22.4,58.5-36.9c19.2-8.6,39.8-14,60.6-14.8C709.5,237.9,709.7,238.2,709.7,238.4z
     M514.5,254.3c-6.2-4.7-12.5-9.9-18.5-15.3c-23.1-20.3-49.4-43.4-92.6-33c-23.1,5.5-42.1,21.3-50.4,42.1
    c-4.4,11.2-5.2,22.9-2.9,33.8c19.2-2.6,38.2,1.8,51.5,12.5c7.8,6.5,13.3,14.6,15.9,23.9c12.5-4.4,22.6-13.3,28.1-24.2
    c-1.3-3.1-1.3-6.8,1.3-6.8c1.6,0,1.3,4.2,0.5,5.5c-5.2,12.2-16.1,21.6-29.6,26.5c2.9,9.9,2.3,21.3-1,33.8
    c-8.1,29.9-30.7,45-48.9,49.1c-16.1,3.6-30.9-0.5-39.5-10.4c-8.6-10.4-11.2-24.2-6.2-36.7c5.5-15.1,19.2-25.5,38-28.9
    c2.9-0.8,6.2-0.5,5.7,1.8c-0.3,1.8-3.1,1.8-5.2,0.5c-0.8-0.5-1.3-0.8-1.6-1c-17.7,3.4-30.7,13.5-36.1,27.8
    c-4.4,12.2-2.1,25.7,6.2,35.6s22.6,13.5,38.5,10.1c17.9-4.2,40-18.7,48.1-48.4c3.4-12.2,3.6-23.4,1-33.3c-3.9,1.3-8.3,2.3-12.7,2.9
    c-19.5,1.8-36.7-6.2-47.1-21.8c-3.6-5.5-6.2-11.4-7.5-17.7c-9.4,1.3-19,4.2-27.8,8.8c-33,17.2-56.4,56.7-54.3,92.3
    c1.6,23.1,12,39.8,34.3,49.1c21.1,8.8,59.5,1.3,86.8-23.7c18.7-17.2,37.4-42.9,57.2-77.7C472.1,285.5,496,263.9,514.5,254.3z
     M357.7,299.8c10.1,15.6,27,23.4,46.3,21.6c4.4-0.5,8.6-1.6,12.5-2.9c-2.6-9.1-7.8-16.9-15.3-23.1c-13.3-10.7-31.7-14.8-50.7-12.5
    C351.7,288.9,354.3,294.6,357.7,299.8z M521.8,257.9c6.8,4.4,14,7.5,22.1,8.6c6.2,0.8,10.4-2.6,11.7-6.2c0.8-2.6-0.3-7.3-5.2-8.3
    C543.3,250.4,535.3,251.9,521.8,257.9z"/>
  <path class="st1" d="M657.2,409.5c-11.4,16.4-47.1,53.8-85.8,68.9c-4.2,5.2-17.2,21.1-18.5,22.4c-15.3,17.4-39,32-60.1,33
    c-25,1-28.6-16.4-27.3-23.4c1.6-9.6,10.7-21.1,38.5-21.6c12.2-0.3,34.6-1.6,57.7-8.6c16.4-19.8,31.7-40.3,50.7-63.4
    c-2.3,2.1-4.7,4.2-7,6c-8.1,6.2-19.8,12-21.3,2.1c-1.8-10.1,10.7-26.3,18.7-33.5c1.3-1,3.4-1,4.7,0.3c1,1.3,1,3.4-0.3,4.7
    c-5.5,4.7-8.8,9.4-12.7,15.6c-3.6,6-7.3,17.7-1,16.1c8.1-2.3,21.1-14,28.3-22.1c5.5-5.7,10.1-10.9,14-14c1.3-1.3,3.4-0.8,4.4,0.5
    c1,1.6,0.8,3.4-0.8,4.4c-9.9,7.8-47.1,55.6-66.8,79.8c38-15.1,72.5-51.5,83.7-67.6c0.3-0.3,0.5-0.5,0.8-0.3
    C657.5,409,657.5,409.2,657.2,409.5z M560.5,481.8c-24.4,7.3-45.5,8.1-60.3,8.3c-20.5,1-31.2,9.6-33.3,20.3
    c-2.1,11.7,8.8,22.6,23.1,21.3c26.3-2.1,43.9-19.2,58.2-35.1C552.5,491.7,556.4,487,560.5,481.8z"/>
  <path class="st1" d="M706.4,409.5c-15.6,15.6-30.7,24.7-41.1,24.7c-10.4,0-14.8-7-13.3-15.6c2.3-10.9,12.5-23.9,22.9-26.8
    c6.2-1.8,11.4,0.3,13.8,3.6c4.2,5.7-0.8,11.7-5.7,14.3c-0.3,0-0.5-0.3-0.5-0.3c-0.3-0.3-0.3-0.8,0-0.8c4.9-2.1,8.3-8.3,4.9-12.2
    c-2.1-2.3-7-2.6-11.7,0.3c-7,3.9-13,12.2-16.4,19.5c-3.6,7.5-2.3,16.4,4.7,16.9c9.9,0.5,25.7-8.3,41.3-23.9c0.5-0.5,0.8-0.5,1-0.3
    C706.4,409,706.6,409.2,706.4,409.5z"/>
  <path class="st1" d="M769.5,408.2c-7.5,9.4-14.6,15.9-20.3,20.5c-6.8,5.5-12.5,9.1-17.7,8.8c-12.2-0.5-3.9-20-0.5-25.7
    c-9.1,10.4-22.1,21.8-26.8,14.6c-6-9.6,5.5-30.4,19.8-34.6c8.8-2.6,14.8,3.1,15.3,8.1c3.9-4.9,7.3-7.8,9.1-8.3
    c3.6-0.8,6.8,3.4,3.1,6.2c-4.7,3.9-25,31.2-19.8,36.4c3.1,2.9,10.1-1,16.6-6.2c5.7-4.4,12.7-11.2,20.3-20.5c0.3-0.3,0.5-0.3,0.8,0
    C769.8,407.4,769.8,407.9,769.5,408.2z M733.4,408.2c1.6-2.9,3.4-5.2,4.9-7.3c0-1.8-0.5-3.4-1.6-4.7c-1.8-2.3-7.3-2.3-12,0.5
    c-12.7,7.5-20.5,26.3-15.9,29.6C713.1,429.3,729,412.9,733.4,408.2z"/>
  <path class="st1" d="M837.4,410c-21.1,18.2-46.8,25.7-60.1,25.7c-2.9,0-4.9-0.5-7.8-1.6c-2.6-1-3.4-4.2-1.8-5.7
    c2.1-1.8,5.2-1,6.2,0.3c4.2,0,13-2.9,20-8.1c4.7-3.6,14.6-12.7,7.8-14.3c-6.2-1.6-19.8,5.5-42.1,21.8
    c-9.4,11.7-20.5,25.5-23.9,29.9c0.5,16.1-18.5,35.9-26,40.3c-5.5,3.4-7,1-7-0.3c0-9.4,23.4-37.4,30.4-46.8
    c-2.6-4.4-7.3-7.8-14.8-9.6c-0.3-0.3-0.5-0.5-0.3-0.8c0-0.3,0.3-0.3,0.5-0.3c7.5,2.1,12.5,5.2,15.1,9.9
    c5.5-7.3,37.2-45.8,42.4-51.7c1.6-1.8,10.1-10.1,14.8-7c0.8,0.5,1.3,1,1.3,2.1c0,3.1-4.7,9.1-18.7,17.4c-1.6,1.6-6,7-11.2,13.5
    c18.7-13.5,29.6-20.3,38.5-19.8c8.1,0.5,9.1,5.7,7.3,9.9c-4.7,10.4-18.7,17.9-29.1,19.8c13-0.5,37.4-7.8,57.7-25.5
    c0.3-0.3,0.5-0.3,0.8,0C837.7,409.5,837.7,409.8,837.4,410z M734.7,459.7c-1.6,2.9-26.8,36.7-25.7,37.2c0.8,0.5,2.6-0.8,4.7-2.6
    C722,487,733.9,471.9,734.7,459.7z M775.5,408.7c12.5-7.5,17.4-14.6,14.8-15.9C787.7,391.8,778.1,405.9,775.5,408.7z"/>
  <path class="st1" d="M1025.9,354.6c0,4.4-2.1,8.6-6,12c-17.7,15.3-72.5,15.9-146.1,1.8c-9.4,10.9-20.3,25.5-29.1,38.7
    c-16.6,25.7-18.2,36.1-16.6,38.2c3.6,4.9,19-9.1,30.7-19.5c7.5-6.8,15.3-13.8,21.6-17.4c0.3-0.3,0.5-0.3,0.8,0c0,0.3,0,0.5-0.3,0.8
    c-6,3.6-13.8,10.7-21.3,17.4c-12,10.7-29.1,27.6-35.9,21.3c-2.6-2.3-7.5-8.1,15.6-43.7c8.3-13,18.2-26.5,27.6-37.4
    c-6.5-1.3-13.3-2.6-20-4.2c-89.2-20.3-116.7-3.1-124.5,5.2c-3.4,3.6-5.2,7.8-4.9,11.4c3.1,1.6,5.5,4.4,3.4,5.7
    c-2.3,1.6-4.2-2.6-4.2-4.9c-0.8-4.2,1.3-9.1,4.9-13c7.8-8.6,35.9-26,125.6-5.5c7,1.6,13.8,2.9,20.5,4.4c3.6-4.7,7.5-8.8,10.7-12
    c1.3-1.3,3.4-1.3,4.7,0c1,1.3,1,3.1,0,4.4c-2.6,2.6-5.5,5.5-8.3,8.8c85.5,16.4,130.8,10.4,144.8-1.8c3.1-2.6,4.9-6,5.2-9.6
    c-2.6-2.1-4.4-5.2-2.3-6.2C1024.6,348.1,1025.9,352.8,1025.9,354.6z"/>
  <path class="st1" d="M944,408.2c-7.5,9.4-14.6,15.9-20.3,20.5c-6.8,5.5-12.5,9.1-17.7,8.8c-12.2-0.5-3.9-20-0.5-25.7
    c-9.1,10.4-22.1,21.8-26.8,14.6c-6-9.6,5.5-30.4,19.8-34.6c8.8-2.6,14.8,3.1,15.3,8.1c3.9-4.9,7.3-7.8,9.1-8.3
    c3.6-0.8,6.8,3.4,3.1,6.2c-4.7,3.9-25,31.2-19.8,36.4c3.1,2.9,10.1-1,16.6-6.2c5.7-4.4,12.7-11.2,20.3-20.5c0.3-0.3,0.5-0.3,0.8,0
    C944.3,407.4,944.3,407.9,944,408.2z M907.9,408.2c1.6-2.9,3.4-5.2,4.9-7.3c0-1.8-0.5-3.4-1.6-4.7c-1.8-2.3-7.3-2.3-12,0.5
    c-12.7,7.5-20.5,26.3-15.9,29.6C887.6,429.3,903.4,412.9,907.9,408.2z"/>
  <path class="st1" d="M1052.2,410c-1,0.8-19,19-34.3,26.3c-14,6.8-15.6-2.6-13.3-9.6c1.8-4.9,10.4-16.9,2.9-16.9
    c-5.5,0.3-18.7,10.9-28.9,20c-2.1,3.6-4.9,7-7.3,10.7c-0.8,1.3-3.1,2.1-4.4,0.8c-1.3-1-1.8-2.9-0.8-4.4c1-1.6,2.3-3.4,3.9-5.5
    c3.4-4.9,9.6-13.8,14.6-22.1c1.8-2.9,9.6-14.6,8.6-15.3c-3.9,0-15.6,13-17.7,15.3c-2.3,2.1-12.7,14.3-23.4,22.6
    c-8.1,6.2-19.8,12-21.3,2.3c-1.8-10.4,10.7-26.3,18.7-33.5c1.3-1.3,3.4-1,4.4,0.3c1.3,1.3,1.3,3.1,0,4.4
    c-5.5,4.7-8.8,9.4-12.7,15.9c-3.6,5.7-7.3,17.4-1,15.9c12.2-3.1,31.7-25.5,34.6-28.6c2.6-3.1,13.8-15.6,18.5-15.6
    c2.9-0.3,4.7,2.1,3.6,6.2c-0.5,2.9-6,12.5-15.6,27.3c4.4-4.2,9.6-8.3,14.3-11.7s15.6-10.7,19.5-4.4c2.6,3.9-1,10.4-4.2,16.4
    c-1.3,2.6-5.2,13.5,4.2,9.6c15.6-6,36.1-26.8,36.4-27c0.3-0.3,0.5-0.3,0.8,0C1052.2,409.5,1052.4,409.8,1052.2,410z M963.8,378.3
    c0-1.8,1.6-3.4,3.4-3.4s3.4,1.6,3.4,3.4s-1.6,3.4-3.4,3.4S963.8,380.1,963.8,378.3z"/>
</g>
</svg>
        </div>
        <div class="swiper-slide container1" style="background: white" data-title="关于我">
          <div class="page">
            <h1 class="english-heading">About Me</h1>
    <div style="color: blue" class="mask">
      <p style=""></p>
      <p style=""></p>

      <div class="mask-left"></div>
      <div class="mask-right"></div>
    </div>

    <section class="about-me">
    <div class="about-me-lfBox">
      <h1>关于我</h1>
      <article class="about-me-text">
        <p>您好，我叫王飞，坐标厦门，我并不是计算机专业，但对前端很感兴趣，所以自学前端</p>
        <p>通过网络的视频，相关书籍，以及项目练习，期间写过移动端页面，pc端页面，响应式网页</p>
        <p>商城，企业网站，视频，音频，地图，后端等都有所涉及</p>
      </article>
      <a href="javascript:;" class="next-page">MORE</a>
    </div>
    <div class="img">
      <div class="img-mask-box"></div>
      <div class='rotateAboutBox'>
        <ul class="rotateOne">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="rotateTwo">
          <div class="more-info">
            <h2>教育背景</h2>
            <li>2014-2018 &nbsp&nbsp&nbsp台湾中原大学</li>
            <li>专业名称：资讯管理系</li>
            <li>主修课程：JAVA，C#，数据结构，<br>ERP，计算机网络，JSP，管理学</li>
            <h2>兴趣</h2>
            <span>阅读</span>
            <span>健身</span>
            <span>看电影</span>
          </div>
        </div>
      </div>


      <img src="images/indexPhone4.jpg" alt="">
    </div>
  </section>
    <!-- <section class="pageOne">
      <h1 class="hide english">About Me</h1>
      <div class="portImg">
       <img class="swiper-lazy" data-src="images/shot.jpg" alt="">
       <div>
         <h2>Information</h2>
         <p>姓名：王飞</p>
         <p>性别：男</p>
         <p>生日：1996.07.25</p>
         <p>身高：177cm</p>
         <p>体重：68kg</p>
         <p>喜欢的电影：<br><span>毕业生，香草天空，<br>白日梦想家，碧海蓝天，<br>暖暖内含光，寻梦环游记<br></span></p>
       </div>
      </div>
       <label class="switch">
        <input type="checkbox">
        <span class="Switchslider round"></span>
       </label>
    </section>
    <section class="pageTwo">
      <div class="intro-mask"></div> 
      <h1 class="hide chinese">关<span>于</span>我</h1>
      <div class="introduce">
          <article>
            <p class="title">自我介绍</p>
            <p class="myintroduce">
              您好，我叫王飞，坐标厦门，我并不是计算机专业，但对前端很感兴趣，所以自学前端<br>
              通过网络的视频，相关书籍，以及项目练习，期间写过移动端页面，pc端页面，响应式网页<br>
              商城，企业网站，视频，音频，地图，后端等都有所涉及<br>
            </p>
        </article>
        <div style="clear: both;"></div>
        <div class="other-info">
            <section class="education">
                <p class="title">教育背景</p>
                <li>2014-2018 &nbsp&nbsp&nbsp台湾中原大学</li>
                <li>专业名称：资讯管理系</li>
                <li>主修课程：JAVA，C#，数据结构，<br>ERP，计算机网络，JSP，管理学</li>
            </section>
            <section class="hobby">
                <p class="title">兴<br>趣</p>
                <div class="hobbyImg">
                  <li data='小说'>
                    <img class="swiper-lazy" data-src="images/book.png" alt="">
                  </li>
                  <li data='健身'>
                    <img class="swiper-lazy" data-src="images/gym.png" alt="">
                  </li>
                  <li data='悬疑片'>
                    <img class="swiper-lazy" data-src="images/movie.png" alt="">
                  </li>
                </div>
            </section>
            <img  data-src="images/palma.png" class="swiper-lazy palm5" alt="">
        </div>

      </div>
    </section> -->
  </div>
        </div>

        <!-- 第二屏 -->
        <div class="swiper-slide container2" style="background:url('./images/indexPhone5.jpg');background-size:100% 100%" data-title="技能掌握">
          <h1 class="skill">掌握技能</h1>
          <section class="pageThree"> 
    <div class="mySkillBox" data-skill='HTML'>
      <article class="skillContent">
        <h2>HTML</h2>
        <p>了解HTML语义化，会使用地图API，插入音视频，了解表单元素新属性，以及localStorage，CANVAS，地理位置等等API</p>
      </article>
      <a href="javascript:;" class="close"></a>
    </div>
    <div class="mySkillBox" data-skill='CSS'>
      <article class="skillContent">
        <h2>CSS</h2>
        <p>熟悉css的布局定位，移动端的适配，喜欢CSS3的便利性，做网页时经常会使用到transform,animation等属性，使用过scss</p>
      </article>
      <a  href="javascript:;" class="close"></a>
    </div>
    <div class="mySkillBox" data-skill='JAVASCRIPT'>
      <article class="skillContent">
        <h2>JAVASCRIPT</h2>
        <p>看过高级程序设计3，对js的运行机制和原理感兴趣，了解ES6的语法，了解面向对象的思想，对浏览器的渲染，http协议，性能优化也有简单了解</p>
      </article>
      <a  href="javascript:;" class="close"></a>
    </div>
    <div class="mySkillBox" data-skill='VUE'>
      <article class="skillContent">
        <h2>VUE</h2>
        <p>做过VUE的实战项目，写过demo和组件，体验到mvvm框架带来的便利，会使用vue-router,vue-cli等相关工具</p>
      </article>
      <a  href="javascript:;" class="close"></a>
    </div>
    <div class="mySkillBox" data-skill="jQuery">
      <article class="skillContent">
        <h2>jQuery</h2>
        <p>使用起来很方便，在练习时常常使用</p>
      </article>
      <a  href="javascript:;" class="close"></a>
    </div>
    <div class="mySkillBox" data-skill="Node.js">
      <article class="skillContent">
        <h2>Node.js</h2>
        <p>参照文档做过简单的后台，仍在摸索中…… </p>
      </article>
      <a  href="javascript:;" class="close"></a>
    </div>
  </section>
<!--           <h1>Personl skill</h1>
        <div class="graph">
    <ul>
      <li class='hide'>
        <div>
          <p class='title'>HTML</p>
          <p class='descript' >了解HTML语义化，会使用地图API，插入音视频，了解表单元素新属性，以及localStorage，地理位置等等API [熟练]</p>
          <progress value="75" max="100"></progress>
        </div>
      </li>
      <li class='hide'>
        <div>
           <p class='title'>CSS</p>
          <p class='descript'>熟悉css的布局定位以及移动端的适配，喜欢CSS3的便利性，做网页时经常会使用到transform,animation等属性，使用过scss [熟练]</p>
          <progress value="75" max="100"></progress>
        </div>
       
      </li>
      <li class='hide'>
        <div>
          <p class='title'>Javascript</p>
          <p class='descript'>看过高级程序设计3，对js的运行机制和原理感兴趣，了解ES6的语法，了解面向对象的思想，对浏览器的渲染，http协议，性能优化也有简单了解，希望在工作中边实践边学习 [熟练]</p>
          <progress value="68" max="100"></progress>
        </div>
      </li>
      <li class='hide'>
        <div>
          <p class='title'>VUE</p>
          <p class='descript'>做过VUE的实战项目，写过demo和组件，体验到mvvm框架带来的便利，会使用vue-router,vue-cli等相关工具 [熟悉]</p>
          <progress value="50" max="100"></progress>
        </div>
      </li>
      <li class='hide'>
        <div>
          <p class='title'>jQuery</p>
          <p class='descript'>使用起来很方便，在练习时常常使用 [熟悉]</p>
          <progress value="65" max="100"></progress>
        </div>
      </li>
      <li class='hide'>
        <div>
          <p class='title'>Node.js</p>
          <p class='descript'>参照文档做过简单的后台，继续学习中…… [了解]</p>
          <progress value="35" max="100"></progress>
        </div>
      </li>
    </ul>
        </div> -->
        <!-- <div class="mySkill" style="background-color: grey;width: 2000px;height: 500px;">
          <div class="skillBtn">
            <a href="javascript:;" class="prevCtrlBtn">←</a>
            <a href="javascript:;" class="nextCtrlBtn">→</a>
          </div>
        </div> -->
        <!-- 移动端 -->
        <div id="swiper-container1">
          <div class="parallax" data-swiper-parallax-y="-13%" data-swiper-parallax-duration="2000"></div>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div data-swiper-parallax-y="-400">
                <p class='title'>HTML<sup>[熟练]</sup></p>
                <p class='descript' >了解HTML语义化，会使用地图API，插入音视频，了解表单元素新属性，以及localStorage，CANVAS，地理位置等等API </p>
                <p class='title'>CSS<sup>[熟练]</sup></p>
               <p class='descript'>熟悉css的布局定位，移动端的适配，喜欢CSS3的便利性，做网页时经常会使用到transform,animation等属性，使用过scss </p>
              </div>
            </div>
            <div class="swiper-slide">
              <div  data-swiper-parallax-y="-400">
               <p class='title'>JAVASCRIPT<sup>[熟练]</sup></p>
               <p class='descript'>看过高级程序设计3，对js的运行机制和原理感兴趣，了解ES6的语法，了解面向对象的思想，对浏览器的渲染，http协议，性能优化也有简单了解 </p>
                <p class='title'>VUE<sup>[熟悉]</sup></p>
                <p class='descript'>做过VUE的实战项目，写过demo和组件，体验到mvvm框架带来的便利，会使用vue-router,vue-cli等相关工具 </p>
             </div>
            </div>
            <div class="swiper-slide">
              <div  data-swiper-parallax-y="-400">
                <p class='title'>JQUERY<sup>[熟悉]</sup></p>
                <p class='descript'>使用起来很方便，在练习时常常使用 </p>
                <p class='title'>NODE.JS<sup>[了解]</sup></p>
                <p class='descript'>参照文档做过简单的后台，继续学习中…… </p>
             </div>
            </div>
          </div>
          <div class="swiper-pagination sml-page"></div>
        </div>
        </div>

        <div class="swiper-slide container2" style="" data-title="项目集合">
              <!-- <img src="./images/living.jpg" class="living" alt=""> -->

              <h1 id="collections" class="collections">Collections</h1>
              <div class="slider-project init">
              <div class="slider-control left inactive"></div>
              <div class="slider-control right"></div>
              <ul class="slider-pagi"></ul>
              <div class="slider">
                <div class="slide slide-0 active">
                  <div class="slide__bg"></div>
                  <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                      <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                      <h2 class="slide__text-heading">小米首页</h2>
                      <p class="slide__text-desc">小米首页，用了jQuery，html，css，font-awesome，项目中有轮播图，倒计时，选项卡，视频插入等等内容，<br>用<b>面向对象</b>的思想封装了图片组件，<br>对写布局和组件更加熟练了</p>
                      <a class="slide__text-link" target="_blank" href="http://zxb89757.gitee.io/xiaomi" target="_blank">展示地址</a>
                    </div>
                  </div>
                </div>
                <div class="slide slide-1 ">
                  <div class="slide__bg"></div>
                  <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                      <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                      <h2 class="slide__text-heading">移动商城</h2>
                      <p class="slide__text-desc">使用了<b>VUE</b>和KOA搭建的移动端购物网页，项目中使用了vue-cli，vant，scss，vue-router，swiper，axios，easy-mock，mongoDB等相关组件，没有做购物的功能只做了展示商品的部分，购物车和会员登录部分用到了localStorage</p>
                      <a class="slide__text-link" href="http://47.100.163.166:8080/#/main" target="_blank">展示地址</a>
                    </div>
                  </div>
                </div>
                <div class="slide slide-2">
                  <div class="slide__bg"></div>
                  <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                      <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                      <h2 class="slide__text-heading">成绩记录系统</h2>
                      <p class="slide__text-desc">用了Express，mongoDB和ejs模板引擎和jQuery开发的成绩记录系统，可以对学生进行新增修改删除，依照学生的总成绩进行排名</p>
                      <a class="slide__text-link" href="http://47.100.163.166:3300/" target="_blank">展示地址</a>
                    </div>
                  </div>
                </div>
                <div class="slide slide-3">
                  <div class="slide__bg"></div>
                  <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                      <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                      <h2 class="slide__text-heading">练习CSS页面</h2>
                      <p class="slide__text-desc">刚开始学习时用来练习布局的，参照了psd设计图完成，其他的小项目、demo可以在我的<a class="git_link" href="https://gitee.com/zxb89757/"  target="_blank"><u>gitee</u></a>网页里查看</p>
                      <a class="slide__text-link" href="http://zxb89757.gitee.io/test_deployment/" target="_blank">展示地址</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div class="swiper-slide last" style="background-image: url('./images/indexPhone6.jpg');" data-title="联系方式">
          <div class="border"></div>
          <h1 class="wink">Contact me</h1>
          <div class="imgs">
            <img class="swiper-lazy palm" data-src="./images/palm2.png" alt="">
            <img class="swiper-lazy palm2" data-src="./images/palm2.png" alt="">
            <img class="swiper-lazy palm3" data-src="./images/palm2.png" alt="">
            <img src="./images/images.png" alt="" class="rocket">
          </div>
          <div class="trggle">
            <p><span>CLICK</span></p>
          </div>
          <div class="iconArea">
            <a href="https://www.douban.com/search?source=suggest&q=feixiedongxi" target="_blank"><span class="iconfont  icon-douban" content="豆瓣"></span></a>
            <span class="iconfont icon-phone" content="17605071237"></span>
            <span class="iconfont icon-qq" content="237297798"></span>
           <a href="https://www.zhihu.com/people/wang-fei-96-13/activities" target="_blank"> <span class="iconfont  icon-zhihu" content="知乎"></span></a>
          </div>
          <!-- <img style="    position: absolute;
    top: 89px;
    right: 675px;
    z-index: 5000;" draggable="false" src="http://www.eastfremantlevet.com.au/assets/images/cat.png" alt=""> -->
          <section style="" class="catBox">

          <img src="images/cat4.png" style="    filter: brightness(85%);    position: absolute; width: 100%" alt="">
              <img src="images/eyes2.png" class="eyes" style="    position: absolute; width: 100%" alt="">
          </section>

          <div class="cont">
            <h3 class="zi" content="T">T</h3>
            <h3 class="zi" content="h">h</h3>
            <h3 class="zi" content="a">a</h3>
            <h3 class="zi" content="n">n</h3>
            <h3 class="zi" content="k">k</h3>
            <h3 class="zi" content="s">s</h3>
            <h3 class="zi" content="!">!</h3>
          </div>
          <div class="rotate3d">
            <img data-src="./images/cat.jpg" class="swiper-lazy qr" width="100%" alt="">
            <img src="./images/wechat.jpg" class="wechat" width="100%" alt="">
            <img data-src="./images/1.jpg" class="swiper-lazy wechat2" width="100%" alt="">
          </div>
                </div>
              </div>

              <div class="swiper-pagination big-page"></div>
            </div>
          </div>
</div>

    <!-- Swiper JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.js"></script>

    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>

var phoneWidth = document.documentElement.clientWidth;
window.onload=(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if(!clientWidth) return;
      if(clientWidth <= 320) {
        docEl.style.fontSize = '18px';
      } else if(clientWidth<1000) {
        docEl.style.fontSize = 18 * (clientWidth / 320) + 'px';
        $('svg').empty();
      }else if(clientWidth<1370){
        docEl.style.fontSize = 20 + 'px'
      }else{
        docEl.style.fontSize = 24 + 'px'
      }
    };
  var clientHeight = docEl.clientHeight;
  if(!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
  if(docEl.clientHeight<=640){
    doc.getElementById('collections').className+='small';
  }
  function initAnimation(){
    $('.init-animation').addClass('hide')
    $('.welcome').addClass('show')
    $('path').addClass('show');
    $(".init-animation").empty();
  }

  if(!!window.ActiveXObject || "ActiveXObject" in window){
      $('.welcome').css('transition','.8s ease .5s');
      $('.next').css('animation-delay','1.0s');
        initAnimation();
     }else{
      setTimeout(function(){
       initAnimation()
      },500)
     }
  
 
})(document, window);



  function slideInit(func,seconds){
    setTimeout(func,seconds)
  }


  var mainSwiper = new Swiper ('.main .swiper-containerone', {
  lazyLoading : true,
  direction: 'vertical',
  resistanceRatio : 0,
  loop: false,
  speed: 600,
  mousewheelControl : true,
  pagination: '.swiper-pagination.big-page',
  //paginationType : 'custom',
  paginationClickable: true,
  simulateTouch : false,
  paginationBulletRender: function (swiper, index, className) {
      var year = $('div[data-title]').eq(index).attr('data-title');
      return '<span class="' + className + '">' + year + '</span>';
  },
  onSlideChangeStart:function(swiper){
    switch(swiper.activeIndex){
      case 0:
      break;
      case 1:
      // slideInit(function(){
        // $('.nav-mask').addClass('show')
      //   $('.portrait').css('opacity',1)
      //   $('ul.infomation').addClass('show')
      // },700)
      if(phoneWidth<768){
         $('.page .introduce').css({'transition-delay':'0s'});
         $('.introduce p.title').css({'transition-delay':'0s'});
         $('.pageTwo').css({'transition-delay':'0s'});
         $('.page .introduce').addClass('show');
         $('.page h1').removeClass('hide');
      }

      slideInit(function(){
        $('.mask p').addClass('show')
        $('.img-mask-box').addClass('init')
        $('.about-me-lfBox').addClass('init');
        $('section.about-me .rotateOne').addClass('init');
      })
      // slideInit(function(){
      //    $('.page').addClass('init')
      //    $('.pageOne').addClass('show');
      //    $('.pageTwo').addClass('show');
      //  },0)
      //  slideInit(function(){
      //    $('.page h1').removeClass('hide');
      //    $('.page .introduce').addClass('show');
      //    $('.page .education').addClass('show');
      //    $('.page .hobby').addClass('show');
      //  },2000)
      break;
      case 2:
      slideInit(function(){
        $('.graph li').removeClass('hide');
        $('span.content').addClass('span');
      },400)
       
      break;
      case 3:
      $('#collections').addClass('init');
        slideInit(function(){
          $('.swiper-container2').addClass('show')
        },450)
      break;
      case 4:
      slideInit(function(){
          $('.slider-project').removeClass('init')
          $('.cont').addClass('show')
          $('.iconfont').addClass('show')
        },90)
      break;
    }
  },
  breakpoints: {
    768: {
      direction: 'horizontal',
    }
  }
});
    var secondSwiper = new Swiper ('#swiper-container1',{
      direction: 'vertical',
      parallax : true,
      speed:300,
      height: 460,
      pagination : '.swiper-pagination.sml-page',
    })

      var SkillSwiper = new Swiper ('.swiper-container .mySkill', {
        scrollbar:'.swiper-scrollbar',
        height: 460,
        width:2000,
        // pagination : '',
      })

    var mySwiper = new Swiper ('.swiper-container2', {
    // direction: 'vertical', // 垂直切换选项
    // loop: true, // 循环模式选项
     effect : 'cube',
     speed: 500,
     cube: {
       slideShadows: true,
       shadow: true,
       shadowOffset: 150,
       shadowScale: .7
     },
       nextButton: '.swiper-container2 .swiper-button-next',
      prevButton: '.swiper-container2 .swiper-button-prev',
     })
    $('img.rocket').click(function(){
      $('.trggle').toggleClass('show',500);

    })
     $('.trggle').click(function(){
      $('.main>.swiper-containerone>.swiper-wrapper').addClass('rocket')
      $('img.rocket2').addClass('show')
      $('.maskBox').fadeIn(500);
        mainSwiper.slideTo(0, 3800, false);
      setTimeout(function(){
         $('img.rocket2').removeClass('show');
         $('.maskBox').fadeOut(100);
         // $('.maskBox').removeClass('show');
         $('.nav-mask').removeClass('show');
       },3700)
    })


    
    $('.carousel').css('height','100vh!important')
    
     var index=3;
     var timer;
     $('.carousel p').click(function(){
      var a = $(this).index();
      changePic(a);
      index=a;
     })
     timer=setInterval(function(){
      changePic(index);
      index++;
      if(index>2){
        index=0;
      }
     },3000)

     function changePic(idx){
      $('.carousel img').eq(idx).siblings('img').fadeOut();
      $('.carousel img').eq(idx).fadeIn();

      // $('.carousel img').eq(idx).addClass('show').siblings().removeClass('show');
      $('.carousel p').eq(idx).addClass('show')
      $('.carousel p').eq(idx).addClass('show').siblings('.show').removeClass('show');
     }
  $('svg').on('mousemove',throttle(move,0))

    function move(e){
       var moveX = (e.pageX * -1/10);
      var moveY = (e.pageY * -1/10);
      $('.carousel img').css({'left':moveX+'px','top':moveY+'px'})
    }
    
    function throttle(func,delay){
      var canRun=true;
      return function(){
        var that = this;
        var args = arguments;
          if(!canRun){
            return
          }
          canRun=false;
          setTimeout(function(){
           func.apply(that,args);
           canRun=true;
         },delay)
      }
    }
    $('.ham').click(function(){
      $('.swiper-container-vertical>.swiper-pagination-bullets').toggleClass('show');
      // $('.ham i.fa-hand-paper-o').removeClass('fa-hand-paper-o').addClass('fa-hand-grab-o');
      // $('.ham i.fa-hand-grab-o').removeClass('fa-hand-grab-o').addClass('fa-hand-paper-o');

      if($('.ham i.fa-hand-paper-o').hasClass('fa-hand-paper-o')){
        $('.ham i').removeClass('fa-hand-paper-o').addClass('fa-hand-grab-o')
      }else if($('.ham i').has('fa-hand-grab-o')){
        $('.ham i').removeClass('fa-hand-grab-o').addClass('fa-hand-paper-o')
      }
      $(this).toggleClass('toggle')
      $('.nav-mask').toggleClass('show')
    })

    $('input').click(function(){
      $('.page .portImg').addClass('show')
      $('.page .portImg img').toggleClass('toggle');
      $('.page .portImg div').toggleClass('toggle');
    })


    
    $('.skillBtn a.prevCtrlBtn').click(function(){
      $('.mySkill').animate({left:'300px'})
      $('.mySkill').css('background','blue')
    })
    $('.skillBtn a.nextCtrlBtn').click(function(){
      $('.mySkill').css('background','red')
      $('.mySkill').animate({left:'-300px'})
    })



    $('.catBox').one('click',function(){
      $(this).toggleClass('hide');
    })

    $('img.eyes').on('mousemove',function(e){
      // console.log(e.pageX,e.pageY)
      var imgWidth = $(this).width();
      var imgHeight = $(this).height();
      var imgOffsetLeft = $(this).offset().left;
      var imgOffsetTop = $(this).offset().top;
      // var a=20;
      //鼠标在图片中的位置
      var mouseX = (e.pageX-imgOffsetLeft-20);
      var mouseY = (e.pageY-imgOffsetTop-20);
      //鼠标距离中线的位置
      mouseX =  (mouseX-imgWidth/2)/100;
      mouseY =  (mouseY-imgHeight/2)/100;
      console.log(mouseX,mouseY);

      $(this).css('transform',"translate(" + mouseX * .65 + "%," + mouseY * .65 + "%)");
    })
    $('.next-page').click(function(){
      // mainSwiper.slideNext();
       $('.rotateAboutBox').toggleClass('move')
     
        $('.mask p').toggleClass('show')
        $('.rotateTwo').toggleClass('show')
        $('.mask').toggleClass('show')
      
      
    })
    $('.page').on('mousemove',function(e){

    })

    var first = $('.mySkillBox').offset().left;
    var nowTime = Date.now()
    console.log(nowTime)
    
    $('.mySkillBox').click(function(e){
      var newDate = Date.now()
      console.log(newDate - nowTime)
      // $('*').click(function(e){
      //   e.stopPropagation()
      // })
      $(".mySkillBox *").click(function(e){
        e.stopPropagation()
      })
      
      if(e.target.className.includes('mySkillBox')&&newDate - nowTime<3000){
        nowTime = newDate
        return false
      }
      nowTime = newDate
      var time;
      var that=this;
      if($(e.target).hasClass('show')){
        return false;
      }else{
        $(this).children('a').addClass('rotate');
        
        var moveX = -($(this).offset().left-first);
        $(this).siblings().css({'opacity':'0','transform':'perspective(1000px) translateZ(-1000px)'});
        $(this).css({'z-index':'2000','transform':'translateX('+moveX+'px)','background-position':'0 20%'})
        if($(this).index()==0){
          time=400;
        }else{
          time=800;
        }
        setTimeout(function(){
          $(that).addClass('show')
          $('article.skillContent').addClass('show')
        },time)
      }
      $('a.close').stop().click(function(e){
        $(this).removeClass('rotate');
        $(this).parent().removeClass('show')
        $('article.skillContent').removeClass('show')
        var idx = $(this).parent().index();
        idx =idx*16.6;
        var that = this;
        setTimeout(function(){
          $(that).parent().css({'z-index':'1500','transform':'translateX(0px)','background-position':''+idx+'% 20%'})
          $(that).parent().siblings().css({'opacity':'1','transform':'perspective(1000px) translateZ(0px)'});
          nowTime = Date.now() - 3000
        },700)
        return false
      })
    })
    // var newTime = Date.now()
    // $('.skillContent').click(function(e){
    //   // console.log(123)
    //   var realTime = Date.now()
    //   if(realTime - newTime < 2000){
    //     console.log('停止')
    //     newTime = Date.now()
    //     e.stopPropagation()
    //   }
    // })
    </script>
    <script type="text/javascript" src="js/pageTwo.js"></script>
</body>
</html>